import { LeftOutlined, RightOutlined } from '@ant-design/icons'
import { Tabs } from 'antd'
import { useEffect, useState } from 'react'

import AekModal, { PromiseThen } from '@/components/AekModal'
import { multiply } from '@/utils/calculate'
import { FILE_TYPE_ENUM } from '@/utils/enum'

import AudioPng from './image/icon_audio.png'
import VideoPng from './image/icon_video.png'
import PdfPng from './image/pdf.png'
import WordPng from './image/word.jpg'
import ImgPreview from './ImgPreview'
import PDFView from './PDFView'
import VideoPlayer from './VideoPlayer'
import WordView from './WordView'
import './index.less'

const pageNum = 8

const Preview = ({ previewList, previewIndex }) => {
  const [selIndex, setSelIndex] = useState()
  const [cardPage, setCardPage] = useState(1)

  useEffect(() => {
    setSelIndex(previewIndex)
    setCardPage(Math.floor(previewIndex / pageNum) + 1)
  }, [previewIndex])

  const onLastPage = () => {
    setCardPage(cardPage - 1)
    const selIndex = multiply(cardPage - 2, pageNum)
    setSelIndex(selIndex)
  }
  const onNextPage = () => {
    setCardPage(cardPage + 1)
    const selIndex = multiply(cardPage, pageNum)
    setSelIndex(selIndex)
  }

  const renderCardShow = file => {
    const { type, thumUrl, name, url } = file
    let children = undefined
    if (type === FILE_TYPE_ENUM.VIDEO) {
      children = <img src={VideoPng} alt={`${name}缩略图`} />
    }
    if (type === FILE_TYPE_ENUM.AUDIO) {
      children = <img src={AudioPng} alt={`${name}缩略图`} />
    }
    if (type === FILE_TYPE_ENUM.IMAGE) {
      children = <img src={thumUrl || url} alt={`${name}缩略图`} />
    }
    if (type === FILE_TYPE_ENUM.PDF) {
      children = <img src={PdfPng} alt={`${name}缩略图`} />
    }
    if (type === FILE_TYPE_ENUM.WORD) {
      children = <img src={WordPng} alt={`${name}缩略图`} />
    }
    return children
  }

  const renderView = item => {
    if (item.type === FILE_TYPE_ENUM.IMAGE) {
      return <ImgPreview detail={item} />
    }
    if (item.type === FILE_TYPE_ENUM.VIDEO || item.type === FILE_TYPE_ENUM.AUDIO) {
      return <VideoPlayer detail={item} />
    }
    if (item.type === FILE_TYPE_ENUM.PDF) {
      return <PDFView detail={item} />
    }
    if (item.type === FILE_TYPE_ENUM.WORD) {
      return <WordView detail={item} />
    }
  }

  return (
    <AekModal title={<span></span>} showFooter={false} className='preview-file'>
      <div className='file-content'>
        <div className='file-header'></div>
        <div className='file-content-show'>
          <Tabs
            activeKey={String(selIndex)}
            animated
            items={previewList.map((item, i) => ({
              key: String(i),
              label: String(i),
              children: <div style={{ width: '100vw', height: '77vh' }}>{renderView(item)}</div>,
            }))}
          />
        </div>
        <div className='file-content-list'>
          <div className='card-number'>{selIndex + 1 + '/' + previewList.length}</div>
          <div className='card-show'>
            <div className='card-left'>
              {previewList.length > pageNum && cardPage > 1 && (
                <div onClick={onLastPage}>
                  <LeftOutlined />
                </div>
              )}
            </div>
            {previewList
              .filter((_, index) => {
                return index >= multiply(cardPage - 1, pageNum) && index < multiply(cardPage, pageNum)
              })
              .map((file, index) => {
                const relIndex = multiply(cardPage - 1, pageNum) + index
                return (
                  <div
                    key={file.id || index}
                    className={`card ${selIndex === relIndex ? 'active' : ''}`}
                    onClick={() => {
                      setSelIndex(relIndex)
                    }}
                  >
                    {renderCardShow(file)}
                  </div>
                )
              })}
            <div className='card-right'>
              {previewList.length > pageNum && multiply(cardPage, pageNum) < previewList.length && (
                <div onClick={onNextPage}>
                  <RightOutlined />
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
    </AekModal>
  )
}

Preview.PromiseThen = PromiseThen

export default Preview
